/**
 * 测点规则=> 设备管理
 *
 * **/
import React, {Component} from 'react';
import {connect} from 'dva';
import Container from '../../../../components/Container'
import Filtrate from '../../../../components/Filtrate'
import MyTable from '../../../../components/MyTable'
import config from '../../../../config'
import PublicService from '../../../../services/PublicService'
import MyModel from '../../../../components/MyModel'
import tableData from '../tableData'
import moment from 'moment'

class Device extends Component {
  state = {
    selectedRowKeys: []
  };

  componentDidMount() {
    this.props.dispatch({type: 'stationRule/getPageListDevice'});
    this.props.dispatch({type: 'stationRule/getDeviceNameDown'});
    this.props.dispatch({type: 'stationRule/getDeviceTypeNameDown'});
    this.props.dispatch({type: 'stationRule/getDeviceAreaNameDown'});
  }

  onSelectChange(selectedRowKeys, selectedRows) {
    this.props.dispatch({type: 'stationRule/saveInfo', payload: {selectedRowsDevice:selectedRowKeys}})
  }

  modalCancel() {
    this.props.dispatch({type: 'stationRule/saveInfo', payload: {isVisibleDevice: false,initDataDevice:{}}})
  }

  modalSave(params) {
    console.log(params);
    params.basicType = params.basicType.key;
    params.deviceType = params.deviceType.key;
    params.areaId = params.areaId.key;
    params.tagType = params.tagType.key;
    params.installTime = moment(params.installTime).unix() * 1000;
    params.operationTime = moment(params.operationTime).unix() * 1000;
    this.props.dispatch({type: 'stationRule/submitDevice', payload: {params}})
  }

  addHandle() {
    this.props.dispatch({type: 'stationRule/saveInfo', payload: {isVisibleDevice: true}})
  }

  deleteHandle() {
    console.log('删除');
    this.props.dispatch({type: 'stationRule/deleteDeviceHandle'})
  }

  onChangePage(page, size) {
    this.props.dispatch({type: 'stationRule/pageChangeDeviceHandle', payload: {pageDevice: page, sizeDevice: size}})
  }

  edit(record) {
    console.log(record);
    this.props.dispatch({
      type: 'stationRule/editReadDeviceHandle',
      payload: {deviceId: record.id, isEdit: false, isVisibleDevice: true}
    })
  }

  read(record) {
    console.log(record);
    this.props.dispatch({
      type: 'stationRule/editReadDeviceHandle',
      payload: {deviceId: record.id, isEdit: true, isVisibleDevice: true}
    })
  }
  search(params){
    console.log(params);
    this.props.dispatch({
      type: 'stationRule/searchDevice',
      payload: {params}
    })
  }
  render() {
    let height = document.body.clientHeight;
    let {selectedRowKeys} = this.props;
    let rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange.bind(this),
    };
    return (
      <div>
        <Filtrate
          items={tableData.itemsDevice(this.props.deviceNameDown)}
          submit={this.search.bind(this)}
        />
        <Container
          addBtnShow
          addBtn={this.addHandle.bind(this)}
          deleteBtnShow
          deleteBtn={this.deleteHandle.bind(this)}
          extraBtn={tableData.extraBtnDevice}
        >
          <MyTable
            columns={tableData.columnsDevice(this.read.bind(this), this.edit.bind(this))}
            scroll={{y: height - 317}}
            dataSource={PublicService.transformArrayData(this.props.dataSource, true, false, this.props.page, this.props.size)}
            rowSelection={rowSelection}
            rowKey="id"
            loading={this.props.loading}
            pagination={{
              size: config.size,
              pageSize: this.props.size,
              total: this.props.total,
              current: this.props.page,
              showQuickJumper: true,
              onChange: this.onChangePage.bind(this)
            }}
          />
          {
            this.props.visible && <MyModel
              title={this.props.isEdit ? '查看' :this.props.initData.id ? '编辑': '新增'}
              visible={this.props.visible}
              width={590}
              okText="保存"
              onCancel={this.modalCancel.bind(this)}
              onSave={this.modalSave.bind(this)}
              items={tableData.itemsModalDevice(this.props.initData, this.props.deviceTypeNameDown, this.props.deviceAreaNameDown)}
              editAble={this.props.isEdit}
              formItemLayout={{
                labelCol: {span: 24},
                wrapperCol: {span: 24}
              }}
            />
          }
        </Container>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    visible: state.stationRule.isVisibleDevice,
    selectedRowKeys: state.stationRule.selectedRowsDevice,
    size: state.stationRule.sizeDevice,
    page: state.stationRule.pageDevice,
    total: state.stationRule.totalDevice,
    dataSource: state.stationRule.dataSourceDevice,
    initData: state.stationRule.initDataDevice,
    loading: state.stationRule.loading,
    isEdit: state.stationRule.isEdit,
    deviceNameDown: state.stationRule.deviceNameDown,
    deviceTypeNameDown: state.stationRule.deviceTypeNameDown,
    deviceAreaNameDown: state.stationRule.deviceAreaNameDown,
  }
}

export default connect(mapStateToProps)(Device)


